<template>
  <div class="app-container">
    <el-form :model="queryParams.condition" ref="queryRef" :inline="true">
      <el-form-item label="操作人" prop="userid">
        <el-select
          v-model="queryParams.condition.userid"
          placeholder="请选择操作人"
          clearable
          style="width: 200px"
        >
          <el-option
            v-for="dict in sys_user"
            :key="dict.id"
            :label="dict.nickname"
            :value="dict.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="操作类型" prop="operationtype">
        <el-select
          v-model="queryParams.condition.operationtype"
          placeholder="请选择操作类型"
          clearable
          style="width: 200px"
        >
          <el-option
            v-for="dict in operationtypes"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="设备名称" prop="devicename">
        <el-select
          v-model="queryParams.condition.deviceid"
          placeholder="请选择设备名称"
          clearable
          style="width: 200px"
        >
          <el-option
            v-for="dict in sys_device"
            :key="dict.id"
            :label="dict.name"
            :value="dict.id"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="控制类型" prop="controltype">
        <el-select
          v-model="queryParams.condition.controltype"
          placeholder="请选择控制类型"
          clearable
          style="width: 200px"
        >
          <el-option
            v-for="dict in controltypes"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="批次名称" prop="batchname">
        <el-input
          v-model="queryParams.condition.batchname"
          placeholder="请输入批次名称"
          clearable
          style="width: 200px"
        />
      </el-form-item> -->
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="noticeList">
      <el-table-column
        label="操作类型"
        align="center"
        prop="operationtype"
        width="100"
      >
        <template #default="scope">
          <dict-tag
            v-if="scope.row.operationtype"
            :options="operationtypes"
            :value="scope.row.operationtype"
          />
          <span v-else>{{ scope.row.operationtype }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作描述"
        align="center"
        prop="operationdesc"
        :show-overflow-tooltip="true"
      />
      <el-table-column label="操作参数" align="center" width="550">
        <template #default="scope">
          <span v-if="scope.row.params && scope.row.params.length > 50">
            <el-tooltip :content="scope.row.params" placement="top">
              <el-link type="primary" style="margin-left: 5px">
                {{ scope.row.params.substring(0, 50) }}...</el-link
              >
            </el-tooltip>
          </span>
          <span v-else>{{ scope.row.params }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作时间"
        align="center"
        prop="operationtime"
        width="200"
      >
        <template #default="scope">
          <span>{{
            parseTime(scope.row.operationtime, "{y}-{m}-{d} {h}:{i}:{s}")
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作人"
        align="center"
        prop="nickname"
        width="200"
      />
      <el-table-column
        label="操作设备"
        align="center"
        prop="devicename"
        width="200"
      />

      <el-table-column
        label="控制类型"
        align="center"
        prop="controltype"
        width="100"
      >
        <template #default="scope">
          <dict-tag
            v-if="scope.row.controltype"
            :options="controltypes"
            :value="scope.row.controltype"
          />
          <span v-else>{{ scope.row.controltype }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="批次名称"
        align="center"
        prop="batchname"
        width="100"
      />
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script setup name="OperationLog">
import { getLogPage } from "@/api/device/operateLog";
import { ref, reactive, toRefs } from "vue";
import { parseTime } from "@/utils/ruoyi";
import { getAllUser } from "@/api/system/user";
import { devicelist } from "@/api/system/device";
const noticeList = ref([]);
const loading = ref(true);
const total = ref(0);

const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    condition: {
      userid: undefined,
      operationtype: undefined,
      controltype: undefined,
      batchname: undefined,
      deviceid: undefined,
    },
  },
});

const { queryParams } = toRefs(data);

const sys_user = ref([]);
const sys_device = ref([]);
const controltypes = [
  {
    label: "开始",
    value: "开始",
  },
  {
    label: "结束",
    value: "结束",
  },
  {
    label: "下发配置",
    value: "下发配置",
  },
];

const operationtypes = [
  { value: "add", label: "新增" },
  { value: "delete", label: "删除" },
  { value: "update", label: "修改" },
  { value: "query", label: "查询" },
  { value: "auth", label: "授权" },
  { value: "control", label: "设备控制" },
];

function getUserList() {
  getAllUser({}).then((response) => {
    sys_user.value = response;
  });
}

function getList() {
  loading.value = true;
  getLogPage(queryParams.value).then((response) => {
    noticeList.value = response.records;
    total.value = response.total;
    loading.value = false;
  })
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  queryParams.value = {
    pageNum: 1,
    pageSize: 10,
    condition: {
      userid: undefined,
      operationtype: undefined,
      controltype: undefined,
      batchname: undefined,
      deviceid: undefined,
    },
  };
  handleQuery();
}

getUserList();
getList();
devicelist({}).then((response) => {
  sys_device.value = response;
});
</script>
